<template>
  <div class="leftOneRightDiv">
    <div class="leftOneRightDivtop">
      <p>目前/日内市场电价对比图</p>
    </div>
    <div id="leftOneRightDivfoot"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var chartDom = document.getElementById("leftOneRightDivfoot");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "（元/kWh）",
          textStyle: {
            color: " #ffffff",
          },
        },
        textStyle: {
          color: " #ffffff",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["9.1", "9.2", "9.3", "9.4", "9.5", "9.6", "9.7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [1, 6, 5, 4, 3, 4, 2],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [5, 7, 3, 1, 5, 6, 2],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftOneRightDiv {
  width: 100%;
  height: 100%;
  .leftOneRightDivtop {
    margin-top: 25px;
    margin-left: 30px;
    width: 347px;
    height: 41px;
    p {
      color: #58f7fd;
      font-size: 28px;
      font-weight: 500;
    }
  }
  #leftOneRightDivfoot {
    margin-top: 10px;
    width: 100%;
    height: 400px;
  }
}
</style>